<template>
  <div>
    <el-row style="position: relative;">
      <el-col>
        <el-tabs stretch v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="待走访" name="first">
            <WaitvisitList :type="type" :tableData="tableData"></WaitvisitList>
          </el-tab-pane>
          <el-tab-pane label="已走访" name="firstin">
            <WaitvisitList :type="type" :tableData="tableData"></WaitvisitList>
          </el-tab-pane>
          <el-tab-pane label="待跟进" name="second">
            <WaitvisitList :type="type" :tableData="tableData"></WaitvisitList>
          </el-tab-pane>
          <el-tab-pane label="已解决" name="third">
            <WaitvisitList :type="type" :tableData="tableData"></WaitvisitList>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="24" class="fw_page">
        <div class="pagination" style="margin-top: 30px;">
          <el-pagination :pager-count="5" background @current-change="handleCurrentChange" :current-page="page"
            :page-size="limit" layout="total, prev, pager, next" :total="Number(count)" align="left"></el-pagination>
        </div>
      </el-col>
      <el-col class="form_add">
        <el-button type="primary" @click="addVisit">发起待走访</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import WaitvisitList from './components/WaitvisitList.vue';
import { visitList, openidLogin } from '@/api/newuser'
import store from '@/store'
import { setToken } from '@/utils/auth'

export default {
  data() {
    return {
      activeName: 'first',
      user_id: localStorage.getItem('userId'),
      search: '',
      demand: '',
      demandLiat: [],
      enterprise: '',
      enterpriseLiat: [],
      date: {
        date1: [],
        date2: []
      },
      tableData: [],
      page: 1,
      limit: 10,
      count: 0,
      type: 1,
      // value: ''
    };
  },
  components: { WaitvisitList },
  mounted() {
    // if (!(localStorage.getItem('userId') && localStorage.getItem('data'))) {
    //   this.$router.push({ path: '/web/small/login' })
    // }
    let openid = localStorage.getItem('openid')
    if(openid){
      openidLogin({ openid: openid }).then(async res => {
        if (res.id) {
          //将res存入localStorage
          localStorage.setItem('data', JSON.stringify(res))
          // console.log(JSON.parse(localStorage.getItem('data')))
          localStorage.setItem('userId', res.id)
          // console.log(res, 'resbinding');
          let demo = await store.commit('user/SET_TOKEN', res.token)
          localStorage.setItem('token', res.token)
          setToken(res.token)
          this.visitList()
  
          function getQueryString(name) {
            const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
            const r = window.location.search.substr(1).match(reg)
            if (r != null) {
              return encodeURIComponent(r[2])
            } else {
              return null
            }
          }
          const code = getQueryString('code')
          let code_url = '?code=' + code + '&state=STATE'
          // window.location.href 中去除code_url
          let url = window.location.href.replace(code_url, '')
          window.location.replace(url)
        } else {
          this.$router.push({ path: '/web/small/login' })
        }
      })
    }else {
      this.$router.push({ path: '/web/small/login' })
    }
  },
  //监听
  watch: {
  },
  methods: {
    addVisit() {
      this.$router.push('/web/addWaitvisit')
    },
    handleClick(tab, event) {
      if (tab.label == '待走访') {
        this.type = 1
      }else if (tab.label == '已走访') {
        this.type = 3
      }  else if (tab.label == '待跟进') {
        this.type = 2
      } else if (tab.label == '已解决') {
        this.type = 5
      }
      this.page = 1
      this.visitList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.visitList()
    },
    visitList() {
      visitList(
        {
          user_id: this.user_id,
          type: this.type,
          page: this.page,
          limit: this.limit,
          company_label: this.enterprise,
          demand_label: this.demand,
          visit_time: this.date.date1,
          v_time: this.date.date2,
          name: this.search
        }
      ).then(res => {
        this.tableData = res.list;
        this.count = res.count
      })
    },
    tableclick(row, column, event) {
      this.$router.push({
        path: '/workEnterprisevisit',
        query: {
          id: row.id,
        }
      })
    },
    goVisit(row) {
      this.$router.push(
        {
          path: '/web/small/workVisit',
          query: {
            id: row.id
          }
        }
      )
    }
  },
};
</script>

<style scoped lang="less">
.fw_page {
  margin-bottom: 20px;
}

.b_bule {
  background-color: #D3E2FF;
  margin: 3px 5px;
  border-radius: 5px;
  color: #4585FF;
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  border: 0;
}

.b_red {
  color: #FF5F58;
  background-color: #FFF6F5;
}

.b_red2 {
  color: #FFFFFF;
  background-color: #FF5F58;
}

.button_from_i {
  min-width: 125px;
  height: 38px;
  line-height: 0px;
  font-size: 14px;
  color: #3377FF;
  background-color: #ebf2ff;
  border: 1px solid #387DFF;
}

.dialog-footer {
  button {
    padding: 5px 30px;
    width: 139px;
    height: 38px;
    background: #387DFF;
    border: 1px solid #E8ECEF;
    border-radius: 19px;
    font-size: 14px;
  }
}


::v-deep .el-table__row td:nth-child(6) .el-button {
  // color: #23B899;
  // background-color: #ecfaf7;
  // border: none;
  // font-size: 14px;
}

::v-deep input {
  border-radius: 38px;
  height: 38px;
  line-height: 38px;
}

.item_list_tag {
  color: #FFF6F5 !important;
  background-color: #FF5F58 !important;
  padding: 0 5px !important;
}

::v-deep .el-input__icon {
  // line-height: 38px;
  // font-size: 16px;
}

::v-deep .has-gutter tr th:nth-child(2),
::v-deep .has-gutter tr th:nth-child(3),
// ::v-deep .has-gutter tr th:nth-child(5),
::v-deep .has-gutter tr th:nth-child(6),
::v-deep .has-gutter tr th:nth-child(7),
::v-deep tbody tr td:nth-child(2),
::v-deep tbody tr td:nth-child(3),
// ::v-deep tbody tr td:nth-child(5),
::v-deep tbody tr td:nth-child(7),
::v-deep tbody tr td:nth-child(6) {
  text-align: center;
}

::v-deep .has-gutter tr th {
  font-size: 14px;
  font-weight: initial;
  color: #334681;
}

.Visitdate {
  margin-top: 62px;

}

::v-deep tbody tr td {
  font-size: 14px;
  color: #334681;
}

::v-deep .el-table__row td:nth-child(7) .el-button {
  // color: #23B899;
  // background-color: #ecfaf7;
  // border: none;
}

.el-main {
  margin-right: 15px;
  border-radius: 5px;
  margin: 25px 30px 0 30px;
}

.fw_title {
  font-weight: bolder;
  font-size: 24px;
}

.line {
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #ebeaed;
}

.form_add {
  position: fixed;
  top: 91%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
}

.fw_form {
  margin-top: 15px;

  .form_add {
    position: fixed;
    top: 91%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
  }

  .form_output {
    .el-button {
      padding: 0px 35px;
      font-size: 16px;
      height: 38px;
      line-height: 5px;
      background-color: #387DFF;
    }

  }

  .form_date {
    div {
      // padding-right: 0 !important;
      // padding-left: 0 !important;
    }
  }
}

.fw_table {
  margin-top: 15px;

  .item_list {
    display: inline-block;
    background-color: #D3E2FF;
    margin: 3px 5px;
    border-radius: 5px;
    padding: 0px 5px;
    color: #387DFF;
  }

  .item_demand {
    color: #FF5F58;
    background-color: #FFF6F5;
  }
}

::v-deep .el-dialog {
  border-radius: 10px;
}

::v-deep .el-dialog__header {
  .el-dialog__title {
    font-size: 22px;
    font-weight: bolder;
  }

  .el-dialog__headerbtn {
    i {
      position: absolute;
      border: 3px solid #fff;
      top: -50px;
      left: 30px;
      color: #fff;
      border-radius: 30px;
      font-size: 24px;
      font-weight: bolder;
    }
  }
}

::v-deep .el-form-item {
  .el-form-item__label {
    font-size: 14px;
    font-weight: initial;
  }

  .el-form-item__content {
    .el-input__inner {
      border-radius: 5px;
    }
  }
}

@media (max-width: 1360px) {}

@media (max-width: 1280px) {}
</style>
